<template>
  <div>
    <div class="park-top">
      <el-input
        v-model="input"
        placeholder="车位名称"
        style="width: 290px; margin-right: 10px"
        size="medium"
      ></el-input>
      <el-input
        v-model="input1"
        placeholder="应缴金额"
        style="width: 290px; margin-right: 10px"
        size="medium"
      ></el-input>
      <el-select
        v-model="value"
        placeholder="缴费状态"
        style="width: 290px; margin-right: 20px"
        size="medium"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-button
        type="primary"
        icon="el-icon-search"
        style="width: 130px; font-size: 14px"
        @click="inquire"
        >查询</el-button
      >
      <el-button
        type="success"
        icon="el-icon-document-copy"
        style="width: 130px; font-size: 14px"
        @click="exportToExcel"
        >全量导出</el-button
      >
      <el-button
        type="primary"
        icon="el-icon-refresh-right"
        style="width: 130px; font-size: 14px"
        @click="chongzhi"
        >重置</el-button
      >
    </div>
    <div class="table-box">
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        v-loading="loading"
      >
        <el-table-column
          type="index"
          label="序号"
          align="center"
          width="70px"
        ></el-table-column>
        <el-table-column
          prop="parkname"
          label="车位名称"
          width="220"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="parkpay"
          label="车位金额"
          width="200"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="enddate"
          label="开始时间"
          width="240"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="startdate"
          label="结束时间"
          width="240"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="orderpay"
          label="应缴金额"
          width="140"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="name"
          label="缴费状态"
          width="165"
          align="center"
        >
          <template slot-scope="scope">
            <el-tooltip
              :content="'park status:' + scope.row.orderstatus"
              placement="top"
            >
              <el-switch
                v-model="scope.row.orderstatus"
                :active-value="1"
                :inactive-value="2"
                @change="flag(scope.row)"
              >
              </el-switch>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >车位缴费</el-button
            >
            <el-button
              size="mini"
              @click="handleDelete(scope.$index, scope.row)"
              style="color: #66b1ff"
              >缴费详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[10, 20, 30, 40, 50]"
        :page-size="pageNum"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        style="text-align: right; margin-top: 10px"
      >
      </el-pagination>
    </div>
    <!-- 模态框 -->
    <div>
      <el-dialog :title="title" :visible.sync="dialogFormVisible">
        <el-form :model="form1">
          <el-form-item label="开始时间:" :label-width="formLabelWidth">
            <el-date-picker
              v-model="form1.enddate"
              type="date"
              placeholder="选择日期"
              size="medium"
              style="width: 500px"
              disabled
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="结束时间:" :label-width="formLabelWidth">
            <el-date-picker
              v-model="form1.startdate"
              type="date"
              placeholder="选择日期"
              size="medium"
              style="width: 500px"
              :disabled="true"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="应缴金额" :label-width="formLabelWidth">
            <el-input
              v-model="form1.orderpay"
              autocomplete="off"
              style="width: 500px"
              size="medium"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="通知内容" :label-width="formLabelWidth">
            <el-input
              type="textarea"
              v-model="form1.parkpay"
              autocomplete="off"
              style="width: 500px"
              size="medium"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="缴费状态" :label-width="formLabelWidth">
            <el-select
              v-model="value3"
              placeholder="请选择"
              style="width: 500px"
              size="medium"
            >
              <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="我的回复" :label-width="formLabelWidth">
            <el-input
              type="textarea"
              v-model="content"
              autocomplete="off"
              style="width: 500px"
              size="medium"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" v-show="title === '车位缴费'">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="taa">缴 费</el-button>
        </div>
        <div
          slot="footer"
          class="dialog-footer"
          v-show="title === '车位订单详情'"
        >
          <el-button @click="dialogFormVisible = false">关 闭</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import * as XLSX from "xlsx"; // 引入 xlsx 库
export default {
  data() {
    return {
      loading: true,
      valuekai: true,
      input: "", // 车位名称
      input1: "", // 应缴金额
      options: [
        {
          value: "1",
          label: "已缴费",
        },
        {
          value: "选项2",
          label: "未缴费",
        },
      ],
      value: "", // 缴费状态
      tableData: [
        {
          // 表单
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      total: 0,
      currPage: 0,
      pageNum: 10,
      currentPage4: 1,
      form: {},
      // mtaikaun
      title: "车位缴费",
      dialogFormVisible: false,
      form1: {},
      formLabelWidth: "120px",
      // 时间
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      value1: "",
      value2: "",
      //
      options1: [
        {
          value: "1",
          label: "未缴费",
        },
        {
          value: "2",
          label: "已缴费",
        },
      ],
      value3: "",
      content: "",
    };
  },
  created() {
    this.getList();
  },
  methods: {
    //导出
    // 导出 Excel
    exportToExcel() {
      // 准备数据
      const data = this.tableData.map((item) => ({
        缴费产品: item.缴费产品,
        缴费人员: item.缴费人员,
        支付类型: item.支付类型,
        缴费金额: item.缴费金额,
        缴费优先级: item.缴费优先级,
        支付时间: item.支付时间,
        支付状态: item.支付状态,
      }));

      // 创建工作表
      const worksheet = XLSX.utils.json_to_sheet(data);

      // 创建工作簿
      const workbook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(workbook, worksheet, "缴费列表");

      // 导出文件
      XLSX.writeFile(workbook, "缴费列表.xlsx");
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageNum = val;
      this.getList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currPage = val - 1;
      this.getList();
    },
    // 渲染
    getList() {
      this.$axios({
        url: "/parking/getParkOrder",
        method: "GET",
        params: {
          parkname: this.input,
          orderstatus: this.input1,
          orderpay: this.value,
          currPage: this.currPage,
          pageNum: this.pageNum,
        },
      }).then((res) => {
        console.log(res);
        setTimeout(() => {
          this.loading = false;
        }, 500);
        this.tableData = res.data.data;
        this.total = res.data.total;
        for (let i = 0; i < this.tableData.length; i++) {
          const data = moment(this.tableData[i].enddate).format(
            "YYYY-MM-DD hh:mm:ss"
          );
          const data1 = moment(this.tableData[i].startdate).format(
            "YYYY-MM-DD hh:mm:ss"
          );
          this.tableData[i].enddate = data;
          this.tableData[i].startdate = data1;
          if (this.tableData[i].enddate == null) {
            this.tableData[i].enddate = "无";
          }
          if (this.tableData[i].orderpay == null) {
            this.tableData[i].orderpay = "暂无";
          }
          // this.valuekai = this.tableData[i].orderpay;
        }
      });
    },
    // 车位缴费
    handleEdit(index, row) {
      console.log(index, row);
      this.dialogFormVisible = true;
      this.form1 = row;
      if (this.form1.parktype != 1) {
        this.form1.parktype = "已缴费";
      } else {
        this.form1.parktype = "未缴费";
      }
      this.value3 = row.parktype;
    },
    taa() {
      this.$confirm("此操作将永久删除该车位, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$axios({
          method: "post",
          url: "/parking/payParkOrder",
          data: {
            u_id: this.form1.id,
            orderstatus: this.value3,
            reply: this.content,
            token: localStorage.getItem("token"),
          },
        }).then((res) => {
          console.log(res);
          this.dialogFormVisible = false;
          this.getList();
        });
      });
    },
    // 缴费详情
    handleDelete(index, row) {
      console.log(index, row);
      this.title = "车位订单详情";
      this.form1 = row;
      this.dialogFormVisible = true;
    },
    // 搜索
    inquire() {
      this.$axios({
        url: "/parking/getParkOrder",
        method: "get",
        params: {
          parkname: this.input,
          orderstatus: this.value,
          orderpay: this.input1,
          currPage: this.currPage,
          pageNum: this.pageNum,
        },
      }).then((res) => {
        console.log(res);
        this.tableData = res.data.data;
        this.total = res.data.total;
      });
    },
    // 重置
    chongzhi() {
      this.input = "";
      this.input1 = "";
      this.value = "";
    },
  },
};
</script>

<style scoped lang="scss">
.park-top {
  display: flex;
}
.table-box {
  margin-top: 20px;
}
</style>